
.popMenus {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    background-color: #3f4754;
    -moz-transition: all .6s ease-out 0s;
    -webkit-transition: all .6s ease-out 0s;
    transition: all .6s ease-out 0s;
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    z-index: 200
}

.popMenus.show {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.pop_title {
    width: 100%;
    position: relative;
    z-index: 2;
    background-color: #2e3642;
    padding: 0 3%;
}

.pop_title span {
    display: inline-block;
    float: left;
    font-size: 0.3rem!important;
    line-height: 2.66;
    color: #6a7380;
}

.closePopMenu {
    display: block;
    width: 49px;
    height: 47px;
    right: 3%;
    top: 50%;
}

.menuContainer {
    width: 100%;
    height: 100%;
}

.menuNavs {
    width: 25.3%;
    background-color: #2e3642;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
}

.menuNavs ul {
    position: absolute;
    width: 100%; /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    padding-bottom: 80px;
}

.menuNavs ul li {
    width: 100%;
    font-size: 0.26rem!important;
    line-height: 2.57;
    padding-left: 9%;
}

.menuNavs ul li.on {
    background-color: #3f4754;
}

.menuNavs ul a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
}

.menuContents {
    width: 74.7%;
    height: 100%;
    overflow: hidden;
    float: left;
    padding: 0 7%;
}

.menuContent {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.menuLists {
    padding-bottom: 80px;
}

.menuList h4 {
    font-size: 0.24rem!important;
    color: #fff;
    line-height: 1.83;
    border-bottom: 1px solid #525c6b;
    margin-top: 2%;
    font-weight: normal;
}

.menuList .links {
    padding: 3% 0.5%;
}

.menuList .links a {
    display: block;
    float: left;
    color: #a9a9a9;
    font-size: 0.26rem!important;
    line-height: 2.2;
    width: auto;
    padding-right: 0.1rem!important;
    overflow: hidden;
}

.menuList .links a.hot:after {
    content: '';
    position: absolute;
    width: 9px;
    height: 11px;
    background: url(/commonJs/images/h.png) no-repeat;
    top: 0;
    right: -1px;
}

.menuList .links a.hot.active:after {
    -webkit-animation: shake .4s linear 0s 1;
    animation: shake .4s linear 0s 1;
}

.pinpaiMenu {
    width: 100%;
    height: 80px;
    line-height: 80px;
    background-color: #FFF;
    -moz-box-shadow: 0 0 8px rgba(34, 23, 20, .5);
    -webkit-box-shadow: 0 0 8px rgba(34, 23, 20, .5);
    box-shadow: 0 0 8px rgba(34, 23, 20, .5);
    overflow: hidden;
}

.menuScroll_lists {
    width: 100%;
    height: 80px;
    overflow: hidden;
}

.menuScroll_lists li {
    width: 196px;
    height: 80px;
    line-height: 80px;
    float: left;
}

.menuScroll_lists li a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 30px;
    text-align: center;
    color: #2e3642;
    text-decoration: none;
    outline: none;
}

.menuScroll_lists li a em {
    display: block;
    width: 136px;
    height: 6px;
    background-color: #d70a50;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -68px;
    display: none;
}

.menuScroll_lists li a:hover em, .menuScroll_lists li.active a em {
    display: block;
}



@media screen and (min-width:320px) and (max-width:359px){
    html {font-size:31.25%;}       
    .closePopMenu {width:25px;height:24px;}
    .menuNavs ul,.menuLists {padding-bottom:40px;}
    .menuTop {height:40px;}
    .showMenuBtn { width: 24px; height: 24px; left: 3%; top: 50%; }
    .showMenuBtn a{height:3px;margin-top:-1.5px;}
    .showMenuBtn a:after { top:7px;}
    .showMenuBtn a:before { top:-7px;}
    .showMenuBtn a em {width:7px;height:7px;right: -3px; top: -12px;}
    .menuTop h1 { width: 180px; height: 20px;}
    .menuTop .topTell { width: 24px; height: 24px;} 
    }
    
@media screen and (min-width:360px) and (max-width:409px){
    .closePopMenu {width:27px;height:26px;}
    .menuNavs ul,.menuLists {padding-bottom:45px;}
    .menuTop {height:45px;}
    .showMenuBtn { width: 27px; height: 27px; left: 3%; top: 50%; }
    .showMenuBtn a{height:3px;margin-top:-1.5px;}
    .showMenuBtn a:after { top:8px;}
    .showMenuBtn a:before { top:-8px;}
    .showMenuBtn a em {width:8px;height:8px;right: -3px; top: -12px;}
    .menuTop h1 { width: 180px; height: 20px;}
    .menuTop .topTell { width: 24px; height: 24px;}    
    }
@media screen and (min-width:410px) and (max-width:479px){
    .closePopMenu {width:31px;height:30px;}
    .menuNavs ul,.menuLists {padding-bottom:51px;}
    .menuTop {height:40px;}
    .showMenuBtn { width: 24px; height: 24px; left: 3%; top: 50%; }
    .showMenuBtn a{height:3px;margin-top:-1.5px;}
    .showMenuBtn a:after { top:7px;}
    .showMenuBtn a:before { top:-7px;}
    .showMenuBtn a em {width:7px;height:7px;right: -3px; top: -12px;}
    .menuTop h1 { width: 180px; height: 20px;}
    .menuTop .topTell { width: 24px; height: 24px;} 
        }
@media screen and (min-width:480px) and (max-width:639px){
    .closePopMenu {width:36px;height:35px;}
    .menuNavs ul,.menuLists {padding-bottom:60px;}
    .menuTop {height:51px;}
    .showMenuBtn { width: 31px; height: 31px; left: 3%; top: 50%; }
    .showMenuBtn a{height:4px;margin-top:-2px;}
    .showMenuBtn a:after { top:9px;}
    .showMenuBtn a:before { top:-9px;}
    .showMenuBtn a em {width:9px;height:9px;right: -3px; top: -14px;}
    .menuTop h1 { width: 205px; height: 20px;}
    .menuTop .topTell { width: 24px; height: 26px;}   
        }
@media screen and (min-width:320px) and (max-width:900px){
    .pinpaiMenu {height:40px;line-height:40px;}
    .menuScroll_lists,.menuScroll1_lists {height:40px;}
    .menuScroll_lists li {width:98px;height:40px;line-height:40px;}
    .menuScroll_lists li a {font-size:15px;}
    .menuScroll_lists li a em {width:68px;height:3px;margin-left:-34px;}
    }